<template>
  <div class="login">
    <van-nav-bar title="登录"/>
    <div class="navs ml-60 mr-60">
      <div class="inputBox flex">
        <input type="text" placeholder="请输入手机号" v-model="info.phone" />
      </div>
      <div class="inputBox flex">
        <input type="text" placeholder="请输入验证码" v-model="info.code" />
        <td-timer
          class="setCode"
          @click.native="sendVCode"
          :disabled="disabled"
          ref="sendCode"
          :second="second"
        ></td-timer>
      </div>
      <div class="mt-60">
        <van-button size="large" class="btn_1" @click="login()">登录</van-button>
      </div>
      <p class="tips mt-60">账号有问题，联系我们</p>
      <ul class="flex_around">
        <li>
          <img src="../../public/images/weChat.png" />
          <p>微信</p>
        </li>
        <li>
          <img src="../../public/images/qq.png" />
          <p>QQ</p>
        </li>
        <li>
          <img src="../../public/images/xueshi.png" />
          <p>学工号</p>
        </li>
      </ul>
      <p class="xieyi">
        登录注册即表示同意
        <span>《智汇长安使用协议和隐私政策》</span>
      </p>
    </div>
  </div>
</template>

<script>
import storage from "@/common/store";
export default {
  data() {
    return {
      info: {},
      disabled: false,
      second: 60,
      class_login: false, //按钮颜色设置
      btn_disabled: true //按钮是否可以点击
    };
  },
  watch: {
    "info.code": {
      handler: function(val) {
        if (val && this.info.phone) {
          this.class_login = false;
          this.btn_disabled = false;
        } else {
          this.class_login = true;
          this.btn_disabled = true;
        }
      },
      immediate: true
    }
  },
  created() {
    this.$store.state.tab_active=0;
  },
  methods: {
    onClickLeft: function() {
      this.$router.push({ path: "/login" });
    },
    login() {
      if (!this.info.phone) {
        this.$toast("请输入手机号");
        return;
      };
      if (!this.info.code) {
        this.$toast("请输入验证码");
        return;
      }
      var that = this;
      this.$post(this.$api.user.login, {
        phoneNumber: this.info.phone,
        verifyCode: this.info.code,
        deviceId:'7DFFEF3C-FB3A-4121-B0D8-08F7BB0718DF',
        deviceName:'IPhone 8',
        deviceModel:'IPhone',
        os:'IOS',
        osVersion:'9.1'
      }).then(data => {
        // that.$cookie.set('campus_token',data.data.campus_token);
        storage.setItem('campus_token',data.data.ct);
        storage.setItem('rt',data.data.rt);
        that.$toast.success({message:"登录成功",duration:500});
        // setTimeout(function() {
        //   that.$router.push({ path: "/" });
        // }, 1000);
		    that.$get(that.$api.user.info,{userId:this.info.phone}).then(data=>{
            storage.setItem('userInfo',data.data);
            that.$toast.success({message:"登录成功",duration:500});
            setTimeout(function() {
              that.$router.push({ path: "/" });
            }, 1000);
        })
        
      });
    },
    sendVCode: function() {
      if (!this.info.phone) {
        this.$toast("请您输入手机号");
        return;
      }
      this.$get(this.$api.sms + "/" + this.info.phone + "/get").then(data => {
        this.send();
        this.$toast.success("发送成功");
      });
    },
    send() {
      this.disabled = true;
      setTimeout(this.sended, 1000);
    },
    sended() {
      this.$refs.sendCode.run();
      this.disabled = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navs {
  padding-top: 1.33rem;
}
.inputBox:nth-child(1) input {
  flex: 1;
}
.inputBox {
  border: 1px solid #efefef;
  border-radius: 0.11rem;
  box-sizing: border-box;
}
.inputBox input {
  border: none;
  outline: none;
  font: 0.3rem/0.9rem "微软雅黑";
  text-indent: 0.3rem;
}
.inputBox:nth-child(2) {
  margin-top: 0.6rem;
}
.inputBox:nth-child(2) input:nth-child(1) {
  flex: 1;
}
.btn_1 {
  height: 0.98rem;
  background-color: #4aace9;
  color: #fff;
  font-size: 0.32rem;
  border-radius: 0.12rem;
}
.tips {
  font-size: 0.24rem;
  color: #4aace9;
}
ul {
  margin-top: 2rem;
}
ul li img {
  display: inline-block;
  width: 0.59rem;
  height: 0.49rem;
  margin: 0 auto;
}
ul li p {
  text-align: center;
  font-size: 0.24rem;
  color: #cccccc;
}
.xieyi {
  font-size: 0.24rem;
  color: #cccccc;
  text-align: center;
  margin-top: 1.44rem;
}
.xieyi span {
  color: #4aace9;
}
</style>
